<template class="graph_resource">
  <el-tabs type="border-card" v-model="activeName" class="demo-tabs" @click="handleClick">
    <el-tab-pane label="图片" name="1"/>
    <el-tab-pane label="视频" name="2"/>
    <el-tab-pane label="音频" name="3"/>
    <el-tab-pane label="图书" name="4"/>
    <el-tab-pane label="小故事" name="5"/>
    <el-tab-pane label="战斗序列" name="6"/>
    <ContentWrap>
      <!-- 搜索工作栏 -->
      <el-form
        class="-mb-15px"
        :model="queryParams"
        ref="queryFormRef"
        :inline="true"
      >
        <el-form-item label="文件名" prop="fileName">
          <el-input
            v-model="queryParams.fileName"
            placeholder="请输入文件名"
            clearable
            @keyup.enter="handleQuery"
            class="!w-240px"
          />
        </el-form-item>
        <el-form-item>
          <el-button @click="handleQuery">
            <Icon icon="ep:search" class="mr-5px"/>
            搜索
          </el-button>
          <el-button @click="resetQuery">
            <Icon icon="ep:refresh" class="mr-5px"/>
            重置
          </el-button>
          <el-button @click="handleAdd('add')" :icon="Plus" plain type="primary">添加</el-button>
        </el-form-item>
      </el-form>
    </ContentWrap>
    <!-- 列表 -->
    <ContentWrap>
      <el-table v-loading="loading" :data="list" :stripe="true" :show-overflow-tooltip="true">
        <el-table-column align="center" label="文件名" fixed="left" prop="fileName"/>
        <el-table-column align="center" label="文件" fixed="left" prop="fileContent">
          <!--文件类型 1：图片    2：视频    3：音频    4：图书    5：小故事   6：战斗序列-->
          <template #default="scope">
            <el-image
              v-if="scope.row.fileType === 1 || scope.row.fileType === 4"
              style="width: 100px; height: 100px"
              :src="scope.row.fileContent"
              fit="fill"></el-image>
            <!-- 如果是视频，使用video组件 -->
            <video
              v-else-if="scope.row.fileType === 2"
              :src="scope.row.fileContent"
              :autoplay="false"
              :controls="true"
              style="width: 100%; height: 100px"></video>
            <!-- 如果是音频，使用audio组件 -->
            <audio
              v-else-if="scope.row.fileType === 3"
              :src="scope.row.fileContent"
              :autoplay="false"
              :controls="true"
              style="width: 100%; height: 100px"></audio>
            <!-- 如果是文本内容，直接显示 -->
            <span v-else>{{ scope.row.fileContent }}</span>
          </template>
        </el-table-column>
        <el-table-column align="center" label="资料对应时间" fixed="left" prop="occurrenceTime"/>
        <el-table-column label="操作" align="center" fixed="right" width="150">
          <template #default="scope">
            <el-button link type="primary" @click="handleEdit('edit',scope.row)">
              修改
            </el-button>
            <el-button link type="primary" @click="deleteFcn(scope.row.id)">
              删除
            </el-button>
          </template>
        </el-table-column>
      </el-table>
      <!-- 分页 -->
      <el-pagination :current-page="queryParams.currentPage" :page-size="queryParams.pageSize"
                     :page-sizes="[10, 20, 30, 50]" :small="false" :disabled="false" :background="false"
                     layout="total, sizes, prev, pager, next, jumper" :total="queryParams.count"
                     @tab-click="handleTabClick"
                     @size-change="handleSizeChange"
                     @current-change="handleCurrentChange"/>

    </ContentWrap>
    <!-- 添加编辑对话框 -->
    <addEditingDialog ref="addEditingDialogRef" @subEvent="getTableData" :dialogTitle="dialogTitle"
                      :operationType="operationType" :addActiveName="addActiveName" :currentOperationData="currentOperationData">
    </addEditingDialog>
  </el-tabs>

</template>
<script lang="ts" setup>
import {ref} from 'vue'
import type {TabsPaneContext} from 'element-plus'
import * as FormApi from "@/api/kg/graphResource";
import addEditingDialog from './addEditingDialog.vue'


const activeName = ref('1')
const handleClick = () => {
  getTableData();
}

defineOptions({name: 'KGProcessIndex'})

const message = useMessage() // 消息弹窗
const {t} = useI18n() // 国际化

const addEditingDialogRef = ref()
const dialogTitle = ref<string>('')  // 当前标题
const operationType = ref<string>('') // 当前操作类型（新增或编辑）
const addActiveName = ref<string>('') // 当前操作类型（新增或编辑）
const currentOperationData = reactive({}) // 当前操作数据

const loading = ref(false)
const total = ref(0)
const list = ref([])
// 列表的数据
const queryParams = reactive({
  pageNo: 1,
  pageSize: 10,
  count: 1,
  fileName: undefined,
})

const handleQuery = () => {
  getTableData()
}
const queryFormRef = ref<any>()
const resetQuery = () => {
  queryFormRef.value.resetFields()
  getTableData()
}
// 分页：pageSize 改变时会触发
const handleSizeChange = (val: number) => {
  queryParams.pageSize = val
  getTableData()
}
// 分页：currentPage 改变时会触发
const handleCurrentChange = (val: number) => {
  queryParams.pageNo = val
  getTableData()
}
const getTableData = () => {
  return new Promise((resolve, reject) => {
    try {
      const params = {
        fileName: queryParams.fileName,
        fileType: activeName.value,
        pageNo: queryParams.pageNo,
        pageSize: queryParams.pageSize
      }
      FormApi.getRDJCGraphResourcePage(params).then((res) => {
        list.value = res.list
        queryParams.count = res.total
        resolve(res)
      })
    } catch {
      reject()
    } finally {
      // console.log('getTableData')
      // console.log('Promise执行完毕')
    }
  })
}
// 添加
const handleAdd = (handleType: string) => {
  dialogTitle.value = '添加关联文件'
  operationType.value = handleType
  console.log("activeName.value",activeName.value)

  addActiveName.value = activeName.value
  addEditingDialogRef.value.open()
}
// 修改
const handleEdit = (handleType: string, data) => {
  dialogTitle.value = '修改关联文件'
  operationType.value = handleType
  console.log(data)
  Object.assign(currentOperationData, data)
  addEditingDialogRef.value.open()
}
// 删除
const deleteFcn = (data: any) => {
  ElMessageBox.confirm('确定永久删除该条数据吗？', '警告', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning'
  })
    .then(() => {
      FormApi.deleteRDJCGraphResource(data)
        .then((res: any) => {
          ElMessage({
            type: 'success',
            grouping: true,
            showClose: true,
            message: '删除已完成'
          })
          getTableData()
        })
        .catch((error: any) => {
          ElMessage({
            message: error,
            grouping: true,
            showClose: true,
            type: 'error'
          })
        })
    })
    .catch(() => {
      ElMessage({
        type: 'info',
        grouping: true,
        showClose: true,
        message: '删除已取消'
      })
    })
}
onMounted(() => {
  getTableData()
})
</script>

<style>

</style>
